<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>鼠标绘制工具示例</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./DrawingManager.css">
    <style>
        html,
        body,
        #map {
            height: 100%;
            width: 100%;
            margin: 0;
        }
    </style>
    <script type="text/javascript"
        src="http://api.map.baidu.com/api?v=1.0&type=webgl&ak=e8YjNkRYd1DzgbjLUy7ya7Md0GuLaNW8"></script>
    <link rel="stylesheet" type="text/css" href="https://api.map.baidu.com/res/webgl/10/bmap.css">
    <script src="./DrawingManager.js"></script>
    <title>DrawingManager Example</title>
</head>

<body>
    <div id="selectbox_Drawing" class="selectbox_Drawing">
        <div class="BMapGLLib_Drawing BMap_noprint anchorTL"
            style="transform: scale(1); margin-left: 0px; margin-top: 0px; position: absolute; z-index: 10; inset: 15px auto auto 15px;">
            <div class="BMapGLLib_Drawing_panel"><a class="BMapGLLib_box BMapGLLib_marker" href="javascript:void(0)"
                    drawingtype="marker" onfocus="this.blur()"></a><a class="BMapGLLib_box BMapGLLib_polyline"
                    href="javascript:void(0)" drawingtype="polyline" onfocus="this.blur()"></a><a
                    class="BMapGLLib_box BMapGLLib_rectangle" href="javascript:void(0)" drawingtype="rectangle"
                    onfocus="this.blur()"></a><a class="BMapGLLib_box BMapGLLib_polygon" href="javascript:void(0)"
                    drawingtype="polygon" onfocus="this.blur()"></a><a
                    class="BMapGLLib_box BMapGLLib_circle BMapGLLib_last" href="javascript:void(0)" drawingtype="circle"
                    onfocus="this.blur()"></a>
                <div class="BMapGLLib_tip">
                    <p class="BMapGLLib_tip_title"></p>
                    <p class="BMapGLLib_tip_text"></p>
                </div>
            </div>
        </div>
    </div>
    <div id="map" class=" bmap-container"
        style="overflow: hidden; position: relative; background-image: url(&quot;http://webmap0.bdimg.com/image/api/bg.png&quot;); text-align: left; touch-action: none;">
        <div id="platform"
            style="overflow: visible; position: absolute; z-index: 5; left: 0px; top: 0px; cursor: url(&quot;http://webmap0.bdimg.com/image/api/openhand.cur&quot;) 8 8, default;">
            <div id="mask" class=" BMap_mask"
                style="position: absolute; left: 0px; top: 0px; z-index: 9; overflow: hidden; user-select: none; width: 1162px; height: 929px; opacity: 0; background: rgb(0, 0, 0); transition: opacity 0.4s ease 0s;">
            </div>
            <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 200;">
                <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 800;"></div>
                <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 700;"></div>
                <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 600;"></div>
                <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 500;"></div>
                <div style="position: absolute; height: 0px; width: 0px; left: 0px; top: 0px; z-index: 400;"></div>
            </div>
        </div>
        <div class="click-ripple-container">
            <div class="click-ripple"></div>
        </div>
        <div class=" anchorBL" style="position: absolute; z-index: 10; inset: auto auto 15px 5px;"><img
                src="http://api.map.baidu.com/images/logo_hd.png" style="height:21px;width:62px;"></div><canvas
            width="1162" height="929"
            style="position: absolute; left: 0px; top: 0px; width: 1162px; height: 929px; z-index: 0;"></canvas>
        <div unselectable="on" class=" BMap_cpyCtrl anchorBL"
            style="cursor: default; white-space: nowrap; text-size-adjust: none; inset: auto auto 2px 2px; position: absolute; z-index: 10;">
            <span _cid="1" style="display: block;"><span
                    style="background: rgba(255, 255, 255, 0.701961);padding: 0px 1px;line-height: 16px;display: inline;height: 16px;">©&nbsp;2022
                    Baidu - GS(2021)6026号 - 甲测资字11111342 - 京ICP证030173号 - Data © 百度智图</span></span>
        </div>
        <div class="BMap_stdMpZoom BMap_noprint anchorBR"
            style="box-shadow: rgba(107, 120, 137, 0.2) 0px 2px 6px 0px, rgba(91, 98, 107, 0.08) 0px 4px 10px 0px; background: rgb(255, 255, 255); position: absolute; z-index: 10; inset: auto 15px 20px auto;">
            <div class="BMap_button_new BMap_stdMpZoomIn">
                <div class="BMap_smcbg in" style="position: absolute"></div>
            </div>
            <div class="BMap_button_new BMap_stdMpZoomOut">
                <div class="BMap_smcbg out" style="position: absolute; top: 36px;"></div>
            </div>
        </div>
    </div>

    <script>
        var map = new BMapGL.Map('map', { enableMapClick: false });
        map.centerAndZoom(new BMapGL.Point(116.404, 39.915), 11);
        map.enableScrollWheelZoom();

        var styleOptions = {
            strokeColor: '#5E87DB', // 边线颜色。
            fillColor: '#5E87DB', // 填充颜色。当参数为空时，圆形将没有填充效果。
            strokeWeight: 2, // 边线的宽度，以像素为单位。
            strokeOpacity: 1, // 边线透明度，取值范围0 - 1。
            fillOpacity: 0.2 // 填充的透明度，取值范围0 - 1。
        };
        var labelOptions = {
            borderRadius: '2px',
            background: '#FFFBCC',
            border: '1px solid #E1E1E1',
            color: '#703A04',
            fontSize: '12px',
            letterSpacing: '0',
            padding: '5px'
        };

        // 实例化鼠标绘制工具
        var drawingManager = new BMapGLLib.DrawingManager(map, {
            // isOpen: true, //是否开启绘制模式
            enableDrawingTool: true, // 是否显示工具栏
            enableCalculate: true, // 绘制是否进行测距(画线时候)、测面(画圆、多边形、矩形) 
            enableSorption: true,
            drawingToolOptions: {
                enableTips: true,
                customContainer: 'selectbox_Drawing',
                hasCustomStyle: true,
                anchor: BMAP_ANCHOR_TOP_LEFT,
                offset: new BMapGL.Size(15, 15), // 偏离值
                scale: 1, // 工具栏缩放比例
                drawingModes: [
                    BMAP_DRAWING_MARKER,
                    BMAP_DRAWING_POLYLINE,
                    BMAP_DRAWING_RECTANGLE,
                    BMAP_DRAWING_POLYGON,
                    BMAP_DRAWING_CIRCLE,
                ]
            },
            enableSorption: true, // 是否开启边界吸附功能
            sorptionDistance: 20, // 边界吸附距离
            enableGpc: true, // 是否开启延边裁剪功能
            enableLimit: true,  // 是否开启超限提示
            limitOptions: {
                area: 50000000, // 面积超限值
                distance: 30000
            },
            circleOptions: styleOptions, // 圆的样式
            polylineOptions: styleOptions, // 线的样式
            polygonOptions: styleOptions, // 多边形的样式
            rectangleOptions: styleOptions, // 矩形的样式
            labelOptions: labelOptions // label的样式
        });
        drawingManager.addEventListener('polygoncomplete', function (e) {
            console.log(e)
        });
        drawingManager.addEventListener('markercomplete', function (e) {
            console.log(e)
        });
        drawingManager.addEventListener('rectanglecomplete', function (e) {
            console.log(e)
        });
    </script>
    <script type="text/javascript"
        src="//mapopen.cdn.bcebos.com/github/BMapGLLib/GeoUtils/src/GeoUtils.min.js"></script>
    <script type="text/javascript" src="//mapopen.cdn.bcebos.com/github/BMapGLLib/DrawingManager/src/gpc.js"></script>


</body>

</html>